<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery\jquery.js"></script>
</head>
<body>
    <h1>标题标签1</h1>
    <h1>标题标签1</h1>
    <h1>标题标签1</h1>
    <h2>标题标签2</h2>
    <P>标签1</P>
    <P>标签2</P>
    <P>标签3</P>
    <P>标签4</P>
    <P>标签5</P>
    <P>标签6</P>
    <P>标签7</P>

    <script>
        $(document).ready(function(){
            $(":header").css("color","blue");
            $("h1:first").css("backgroundColor","pink");
            $("h1:last").css("backgroundColor","pink");

            //eq相等 lt小于 gt大于 
            $("p:eq(1)").css("backgroundColor","pink");
            $("p:lt(2)").css("backgroundColor","pink");
            $("p:gt(3)").css("backgroundColor","pink");

            //odd even
            $("p:odd").css("backgroundColor","yellow");
            $("p:even").css("backgroundColor","pink");
            
            //不是p标签的所有标签 p:not(#x)
        });
    </script>

    <div>
        <p>文字1</p>
        <span>
            <p>文字2</p>
        </span>
    </div>
    <p>文字3</p>
    <p>文字4</p>
    <script>
        $(document).ready(function(){
            $("div p").css("backgroundColor","red");//找后代用空格
            $("div>p").css("backgroundColor","blue");//找儿子用> 
            $("div+p").css("backgroundColor","pink");// 后代第一个(后边相邻的第一个)+ 
            // $("div~p").css("backgroundColor","yellow");//同辈的下边元素（后边所有同辈）~ 

        });
    </script>



    <div id="one">srcset</div>
    <div id="one">Google</div>
    <script>
        $(document).ready(function(){
            // $("div").css("backgroundColor","red");
            $("#one").css("backgroundColor","red");
            
        });
    </script> 
    
    <script>
        $(document).ready(function(){
            $("p").click(function(){
                $(this).hide();
            });
        });
    </script>

    <p>如果你点我，我就会消失</p>
    <p>继续点我！</p>
    <p>接着点我！</p>
</body>
</html>